<template>
  <div class="app">
    <HeaderNav v-show="$route.meta.show"></HeaderNav>
    <router-view></router-view>
    <!-- 回到顶部 -->
    <el-backtop :bottom="100">
      <div class="toTop">
        <a>
          <i class="iconfont icon-fanhuidingbu"></i>
          <p>toTop</p>
        </a>
      </div>
    </el-backtop>
  </div>
</template>
<script>
export default {
  // 逻辑 判断是否有walltoken，有则自动去
  mounted() {
    // 判断是否登录
    if (localStorage.getItem("WALLTOKEN")) {
      // 判断token是否过期
      this.isPastdue();
      // 获取用户的基本数据 存放到vuex中
      this.$nextTick(() => {
        this.$store.dispatch("getuserinfo");
      });
    }
  },
  methods: {
    // 解决token过期问题回调
    async isPastdue() {
      let result = await this.$API.isPastdue();
      if (result.code !== 200) {
        // 删除旧token,获取新token
        localStorage.removeItem("WALLTOKEN");
        // 判断用户是否保存了密码 保存则自动登录,没有则跳转到登录页面
        let loginForm = JSON.parse(localStorage.getItem("WALLLOGINFORM"));
        // 判断有这两个值则去自动发起登录请求
        if (loginForm.username && loginForm.password) {
          // 发送登录请求
          let result = await this.$API.reqLogin(loginForm);
          if (result.code === 200) {
            // 储存token
            localStorage.setItem("WALLTOKEN", result.data.token);
            // 解决头部导航响应式问题
            this.$store.dispatch("getuserinfo");
            this.$message({
              message: "自动登录成功",
              type: "success",
            });
          } else {
            this.$message({
              message: result.message,
              type: "error",
            });
          }
        } else {
          // 需要用户重新登录
          this.$router.push("/login");
          this.$message("身份过期,请重新登录");
        }
      }
    },
  },
};
</script>

<style lang="less">
body,
html,
.app {
  width: 100%;
  height: 100%;
  .toTop {
    height: 100%;
    width: 100%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    text-align: center;
    line-height: 40px;
    color: #008c8c;
    i {
      font-size: 30px;
      color: #008c8c;
    }
    a {
      font-size: 14px;
      p {
        color: #008c8c;
        margin-top: -15px;
      }
    }
  }
}
</style>
